import { useLocation, useNavigate } from 'react-router-dom';
import { FC, useCallback, useEffect } from 'react';
import qs from 'qs';
import { Card, Col, Row } from 'antd';

import testRoutes from '@/test/routes';

const TestPages: FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    // 获取重定向地址
    const { toLogin } = qs.parse(location.search.substr(1));
    if (toLogin) navigate('/');
  }, [location]);

  const handleToTestPage = useCallback((path?: string) => {
    if (path) navigate(`${path}?toLogin=true`);
  }, []);

  return (
    <Row gutter={24} style={{ margin: 10 }}>
      {testRoutes.map(item => (
        <Col span={4} key={item.name}>
          <Card
            hoverable
            onClick={() => handleToTestPage(item.path)}
            style={{
              backgroundColor: `hsl(${Math.floor(Math.random() * 361)}, 50%, 75%)`
            }}
          >
            <div style={{ textAlign: 'center' }}>{item.name}</div>
          </Card>
        </Col>
      ))}
    </Row>
  );
};

export default TestPages;
